import React, { useState } from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import Box from '@mui/material/Box';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { useFormatter } from '../../../../components/i18n';
import MalwareEditionOverview from './MalwareEditionOverview';
import MalwareEditionDetails from './MalwareEditionDetails';
import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';

const MalwareEditionContainer = (props) => {
  const { t_i18n } = useFormatter();

  const { handleClose, malware } = props;
  const { editContext } = malware;

  const [currentTab, setCurrentTab] = useState(0);

  const handleChangeTab = (event, value) => setCurrentTab(value);

  return (
    <>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={currentTab}
          onChange={handleChangeTab}
        >
          <Tab label={t_i18n('Overview')} />
          <Tab label={t_i18n('Details')} />
        </Tabs>
      </Box>
      {currentTab === 0 && (
        <MalwareEditionOverview
          malware={malware}
          enableReferences={useIsEnforceReference('Malware')}
          context={editContext}
          handleClose={handleClose}
        />
      )}
      {currentTab === 1 && (
        <MalwareEditionDetails
          malware={malware}
          enableReferences={useIsEnforceReference('Malware')}
          context={editContext}
          handleClose={handleClose}
        />
      )}
    </>
  );
};

const MalwareEditionFragment = createFragmentContainer(
  MalwareEditionContainer,
  {
    malware: graphql`
      fragment MalwareEditionContainer_malware on Malware {
        id
        ...MalwareEditionOverview_malware
        ...MalwareEditionDetails_malware
        editContext {
          name
          focusOn
        }
      }
    `,
  },
);

export default MalwareEditionFragment;
